/**
 * Created by GYL on 2018/7/25
 */
import React, { Component } from 'react';
import MyModal from '../../../components/common/MyModal';
import { Form, Row, Col, Select, Input, message, Button, Upload, Icon, DatePicker } from 'antd';
import MyIcon from '../../../components/common/MyIcon';
import config from '../../../config';
import style from "./AddModal.less";
import moment from 'moment';
import myModalStyles from '../../../components/common/Mymodal.less';
import request from '../../../utils/request';
// import styles from './sub.less';
import MyTable from "../../../components/common/MyTable";
const FormItem = Form.Item;

class wxfwlyModal extends Component {
  state = {
    solidType: '1',
    tableData: [],
    upDis: true
  };
  componentDidMount() {

  };
  // modal保存
  onModalSave = () => {
    this.props.form.validateFieldsAndScroll((err, val) => {
      if (!err) {
        this.props.onModalSave(val, this.props.type)
      }
    });
  };
  // 筛选条件组件change事件
  getChangeValue(value, e) {
    let t = this;
    let params = {};
    params[value] = e.target.value;
    t.setState({ params });
  }
  onCheckbox(value, e) {
    let t = this;
    let params = {};
    params[value] = e.target.value;
    t.setState({ params });
  }

  render() {
    let t = this;
    let { tableData, upDis } = t.state;

    let { getFieldDecorator } = t.props.form;

    let titleText = this.props.titleText
    let arr1 = this.props.moddleArr;

    return (
      <div>
        <MyModal
          {...t.props}
          // className={myModalStyles.jlModal}
          width={this.props.width}
          onModalSave={t.onModalSave}>
          <Form>
            <Row gutter={48}>

              <p style={{ fontWeight: 900, fontSize: 18, textAlign: "center" }}>{titleText}</p>

              {
                arr1.map((item, index) => {
                  if (item.type === 'input') {
                    return (

                      <Col span={8}>
                        <span style={{ color: "red", verticalAlign: "middle", fontSize: 18 }}>*</span>{item.name}<br />
                        <Form.Item>
                          {
                            getFieldDecorator(item.paramName, {
                              initialValue: item.initialValue ? item.initialValue : '',
                              rules: item.rules || null
                            })(
                              <Input onChange={t.getChangeValue.bind(t, item.paramName)} size={config.size} style={item.style}
                                placeholder={item.placeholder} disabled={item.disabled} />
                            )
                          }
                        </Form.Item>
                      </Col>

                    )
                  } else if (item.type === 'datePicker') {
                    let disabled = item.disabledDate ? disabledDate : null;
                    return (
                      <Col span={8}>
                        <span style={{ color: "red", verticalAlign: "middle", fontSize: 18 }}>*</span>{item.name}<br />
                        <Form.Item>

                          {
                            getFieldDecorator(item.paramName, {
                              initialValue: item.initialValue ? item.initialValue : null,
                              rules: item.rules || null
                            })(
                              <DatePicker size={config.size} disabledDate={disabled} disabled={item.disabled} style={item.style} />
                            )
                          }
                        </Form.Item>
                      </Col>
                    )
                  } else if (item.type === 'title') {
                    return (
                      <Col span={12} style={{ width: "100%", marginBottom: 10 }}>
                        <h2 style={{ fontSize: 16 }}><span style={{ borderTopLeftRadius: 8, borderTopRightRadius: 8, padding: 5, color: "#fff", backgroundColor: "#03a9f4" }}>{item.name}</span></h2>
                        <div style={{ width: "100%", borderBottom: "1px solid #ccc" }}></div>

                      </Col>
                    )
                  }

                })
              }

            </Row>

          </Form>
        </MyModal>
      </div>
    )
  }
}
export default Form.create()(wxfwlyModal);
